import React from 'react';
import { NavBar, Icon } from 'antd-mobile';
import GetCity from "../../components/GetCity/GetCity"
import Fit from './Fit';
class House extends React.Component {
    state={
        houselist:[]
    }
    render() { 
        return <div>
             <NavBar
                mode="dark"
                leftContent={<GetCity/>}
                rightContent={<Fit/>}
                onLeftClick={() =>{
                    this.props.history.push("/city")
                }}
                >找房</NavBar>

                {/* 渲染列表 */}

                {
                    this.state.houselist.map((v,k)=>{
                        return <div 
                        onClick={()=>{
                            console.log(6666);
                        }}
                        style={{
                            display:"flex",
                            height:"130px",
                            boxSizing:"border-box",
                            padding:"10px",
                            background:"white",
                            justifyContent:"space-between",
                            alignContent:"center",
                            borderBottom:"1px solid #dedada"
                        }}>
                            <div style={{
                                width:"130px",
                                height:"130px"
                            }}>
                                <img style={{borderRadius:"5px"}} width="100%" height="100px" src={v.houseimg}/>
                            </div>
                            <div style={{
                                width:"250px",
                                boxSizing:"border-box",
                                padding:"5px"
                            }}>
                               <h4 style={{
                                   margin:0
                               }}>
                                   {v.title.length>14?v.title.substr(0,14)+'...':v.title}
                               </h4>
                               <p style={{
                                   display:"flex",
                                   flexWrap:"wrap",
                                  
                               }}>
                                   {
                                       v.tags.map((i,j)=>{
                                           return <span style={{
                                               background:j%2==0?"pink":'skyblue',
                                               borderRadius:"5px",
                                               margin:"2px",
                                               padding:"2px",
                                               color:"white"
                                           }}>
                                               {i}
                                           </span>
                                       })
                                   }
                               </p>
                                <p style={{
                                    color:"red"
                                }}>
                                    ￥{v.price}
                                </p>
                            </div>
                        </div>
                    })
                }
        </div>;
    }
    getHouse(data){
       this.api.getHouse(data)
       .then(res=>{
           console.log(res);
           if(res.data.code==200){
               this.setState({
                   houselist:res.data.msg
               })
           }
       })
    }

    componentDidMount(){
        let obj={
            areaID:JSON.parse(localStorage.getItem("cityinfo")).code// 获得本地存储城市的信息
        }
        this.getHouse(obj)
    }

}
 
export default House;